<!-- 环形图 -->
<template>
  <div
    class="chartcontainer"
    v-if="setrefresh"
  >
    <div :style="{'margin-bottom':'10px'}">{{title}}</div>
    <!--   :legend-visible="false" 隐藏图例 -->
    <!-- :judge-width="true" 拦截动画效果 -->
    <ve-ring
      :data="blockdata"
      width="100%"
      height="100%"
      ref="mychart"
      :theme="theme"
      :judge-width="true"
      :settings="chartSettings"
      :after-config="afterConfig"
    ></ve-ring>
  </div>
</template>

<script>
import VeRing from "v-charts/lib/ring.common";
import { mBack, getToken, back } from "../../../assets/js/common.js";
import { fetch, post } from "../../../config/request.js";
export default {
    props: {
    diyposition: [Object],
    chartData: [Object],
    changesizewidth: [Number, String],
    changesizeheight: [Number, String],
    colors :[Object],
    ringwidth:[Number, String],
    timer: [Number, String],
    theme: [Object],
    title:[String],
    searchid: [Number, String],
    chartid: [Number, String],
    field:[String],
    drill:[String],
    isShowLegend: {
      type: Boolean,
      default: true
    }
  },
  data() {
    this.chartSettings = {
      roseType: "radius",
      offsetY: this.ringwidth / 2,
      radius: [20, this.ringwidth / 3],
      visualMap: {
        min: 80,
        max: 600,
        inRange: {
          colorLightness: [0, 1]
        }
      },
      label: {
        normal: {
          formatter: params => {
            return `${params.data.name} \n ${this.chartData.columns[1]}:${params.data.value}(${params.percent}%)`;
          }
        }
      },
      dataType: value => {
        return `${this.chartData.columns[1]}:${value}`;
      }
    };
    return {
      blockdata: this.chartData,
      intervaltime: this.timer,
      setrefresh: true
    };
  },

  components: { VeRing },

  computed: {},
  mounted() { },
  destroyed() { },
  methods: {
    afterConfig(options) {
      if (!this.isShowLegend) {
        options.legend = {
          data: []
        }
      }
      // options.legend.textStyle = {
      //   color: this.colors[3]
      // };
      return options;
    }
  },
  watch: {
    changesizewidth(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    changesizeheight(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    ringwidth(oldvalue, newvalue) {
      this.setrefresh = false;
      this.chartSettings = {
        offsetY: this.ringwidth / 2,
        radius: [20, this.ringwidth / 3],
        label: {
          normal: {
            formatter: params => {
              return `${params.data.name}  ${this.chartData.columns[1]}:${params.data.value}(${params.percent}%)`;
            }
          }
        }
      };
      this.setrefresh = true;
    },
    chartData(oldvalue, newvalue) {
      this.blockdata = oldvalue;
      //??????
      this.chartSettings = {
        yAxisName: [`${this.chartData.columns[1]}`], //   xAxisName: this.chartData.columns[0]
        label: {
          normal: {
            formatter: params => {
              return `${params.data.name} \n ${this.chartData.columns[1]}:${params.data.value}(${params.percent}%)`;
            }
          }
        },
        dataType: value => {
          return `${this.chartData.columns[1]}:${value}`;
        }
      };
      this.$refs.mychart.echarts.setOption({
        series: {
          data: this.blockdata
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.chartcontainer {
  width: 100%;
  height: calc(100% + 30px) !important;
  .title {
  }
  .ringchart {
    display: flex;
    height: 70%;
  }
  .barchart {
    height: 30%;
    display: flex;
  }
}
</style>